<template>
    <div class="lucky_draw_detail">
        <c-title text="抽奖详情"></c-title>
        <div style="padding: 0.625rem 0.75rem;">
            <div class="top">
                <div class="tips">中奖奖品</div>
                <div class="discount">
                    <div class="left">
                        <div class="flex-a">
                            <template v-if="coupon.coupon_method == 1">
                                <span class="small">¥</span>
                                <span class="price">{{ coupon.deduct }}</span>
                            </template>
                            <template v-else>
                                <span class="price">{{ coupon.discount }}</span>
                                <span class="price">折</span>

                            </template>
                        </div>
                        <div class="text">
                            满{{ coupon.enough }}{{coupon.coupon_method == 1?'可用':'立享'}}
                        </div>

                    </div>
                    <div class="line-box">
                        <div class="line"></div>
                    </div>
                    <div class="right">
                            <div class="discount-name">{{ coupon.name }}</div>
                            <div class="discount-time" v-if="coupon.start_time||coupon.end_time">{{ coupon.start_time }}-{{ coupon.end_time }}</div>
                    </div>
                </div>
            </div>
            <div class="top" style="margin-top: .625rem;">
                <div class="tips">中奖记录</div>
                <div class="item" v-for="item in win_record" :key="item.id">
                    <img :src="item.has_one_member && item.has_one_member.avatar_image" alt="" />
                    <div class="item-right">
                        <div class="nick-name">{{ item.has_one_member && item.has_one_member.username }}</div>
                        <div class="create-time">{{ item.created_at }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            coupon: { },
            win_record: [],
        };
    },

    activated() {
        this.getData();
    },
    methods: {
        getData() {
            $http.post('plugin.fight-groups-lotto.frontend.lotto-detail.get-win-info',{team_id:this.$route.params.team_id}, '.').then(res => {
                if (res.result) {
                    let { coupon = {}, win_record = [] } = res.data;
                    this.coupon = coupon;
                    this.win_record = win_record;
                } else {
                    this.$toast(res.msg);
                }
            })
        },

    }
};
</script>

<style scoped lang='scss'>
.lucky_draw_detail {
    height: 100%;
    min-height: 100vh;
    background-color: var(--themeBaseColor);

    .nick-name {
        font-weight: bold;
        font-size: 1rem;
        color: #00001C;
        line-height: 1;
    }

    .item-right {
        text-align: left;
    }

    .create-time {
        font-weight: 400;
        font-size: .8125rem;
        color: #6E6E79;
        line-height: 1;
        margin-top: .3438rem;
    }

    img {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 50%;
        margin: 0 .375rem 0 0;
    }

    .item {
        display: flex;
        align-items: center;
        text-align: left;
        margin-bottom: 1.2188rem;
    }

    .discount-name {
        font-weight: 500;
        font-size: .9375rem;
        color: #00001C;
        text-align: left;
        text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    }

    .line-box {
        width: .75rem;
        margin: 0 .625rem;
    }

    .discount-time {
        font-weight: 400;
        font-size: .8125rem;
        line-height: 1;
        margin-top: .875rem;
        color: #6E6E79;
        text-align: left;
    }

    .small {
        font-size: .9375rem;
        color: var(--themeBaseColor);
        font-weight: bold;
    }

    .text {
        color: var(--themeBaseColor);
        font-weight: 400;
        font-size: .8125rem;
    }

    .price {
        font-size: 1.875rem;
        color: var(--themeBaseColor);
        font-weight: bold;
    }

    .top {
        background: #FFFFFF;
        border-radius: .5rem;
        padding: 1.25rem .9375rem .9375rem;
    }

    .left {
        padding: 0 1.1563rem;
        box-sizing: border-box;
    }

    .line-box {
        position: relative;

        &::before {
            position: absolute;
            content: "";
            left: 0;
            bottom: -0.375rem;
            width: .75rem;
            height: .75rem;
            background-color: #fff;
            transform: translate(-50%, 0);
            border-radius: 50%;
            z-index: 1;

        }

        &::after {
            position: absolute;
            content: "";
            left: 0;
            top: -0.375rem;
            width: .75rem;
            height: .75rem;
            background-color: #fff;
            transform: translate(-50%, 0);
            border-radius: 50%;
            z-index: 1;

        }
    }

    .line {
        width: 1px;
        height: 4.375rem;
        border-left: 1px dotted var(--themeBaseColor);
        position: relative;
        margin: .625rem 0;
    }

    .discount {
        display: flex;
        align-items: center;
        // padding: 1.125rem 0;
        position: relative;

        &::after {
            position: absolute;
            content: "";
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            border-radius: .5rem;
            background: var(--themeBaseColor);
            opacity: 0.1;
        }

    }

    .tips {
        text-align: center;
        margin-bottom: 1.25rem;
        font-weight: bold;
        font-size: .9375rem;
        color: #00001C;
        line-height: 1;
    }
}
</style>